<template>
  <div class="sale_online_detail">
    <search @search="search" />
    <div class="top_data d_a_c">
      <div class="chart">
        <common-chart :info="rateAnalysisList[0]" id="saleOnlineChart1" />
      </div>
      <div class="chart">
        <common-chart :info="rateAnalysisList[1]" id="saleOnlineChart2" />
      </div>
      <div class="chart">
        <common-chart :info="rateAnalysisList[2]" id="saleOnlineChart3" />
      </div>
    </div>
    <div class="bottom_table">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="productName" label="产品名称" width="250">
          <template slot-scope="scope">
            <div
              class="row_1_ellipsis"
              :title="scope.row.productName"
              v-html="scope.row.productName"
            ></div>
          </template>
        </el-table-column>
        <el-table-column prop="companyName" label="企业名称" width="250">
          <template slot-scope="scope">
            <div
              class="row_1_ellipsis"
              :title="scope.row.companyName"
              v-html="scope.row.companyName"
            ></div>
          </template>
        </el-table-column>
        <el-table-column prop="saleCount" label="销售额（万元）">
        </el-table-column>
        <el-table-column prop="saleFrom" label="销售渠道">
          <template slot-scope="scope">
            <div v-html="computeSaleForm(scope.row)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="time" label="时间"> </el-table-column>
        <el-table-column prop="rank" label="排名"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Search from "./Search.vue";
import CommonChart from "./CommonChart.vue";
export default {
  components: { Search, CommonChart },
  data() {
    return {
      show: false,
      rateAnalysisList: [
        {
          title: "第一产业销售占比",
          data: 75,
        },
        {
          title: "第二产业销售占比",
          data: 17,
        },
        {
          title: "第三产业销售占比",
          data: 8,
        },
      ],
      tableData: [
        {
          saleCount: "5250.00",
          productName: "电动牙刷",
          companyName: "怀仁市普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 1,
        },
        {
          saleCount: "452.00",
          productName: "猫山牛奶",
          companyName: "吉时利公司",
          saleFrom: "乐购超市",
          time: "2022-09-21",
          rank: 2,
        },
        {
          saleCount: "358.00",
          productName: "柠檬咖啡",
          companyName: "乐哈哈公司",
          saleFrom: "华润超市",
          time: "2022-09-21",
          rank: 3,
        },
        {
          saleCount: "100.00",
          productName: "金矿手表",
          companyName:
            "怀仁市苦身焦思数据数控技术看就看是框架看着就困开普陀公司",
          saleFrom: "美宜佳",
          time: "2022-09-21",
          rank: 4,
        },
        {
          saleCount: "5250.00",
          productName: "长山半岛天矿自然无添加剂哈哈哈哈哈蒸馏水",
          companyName: "怀仁市普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 5,
        },
        {
          saleCount: "5250.00",
          productName: "金矿手表",
          companyName:
            "怀仁市苦身焦思数据数控技术看就看是框架看着就困开普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 6,
        },
        {
          saleCount: "5250.00",
          productName: "长山半岛天矿自然无添加剂哈哈哈哈哈蒸馏水",
          companyName: "怀仁市普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 7,
        },
        {
          saleCount: "5250.00",
          productName: "长山半岛天矿自然无添加剂蒸馏水",
          companyName:
            "怀仁市苦身焦思数据数控技术看就看是框架看着就困开普陀公司",
          saleFrom: "沃尔玛",
          time: "2022-09-21",
          rank: 8,
        },
      ],
    };
  },
  computed: {
    computeSaleForm() {
      return (obj) => {
        let res = "<span style='color:#108EE9'>${obj.saleFrom}</span>";
        if (obj.rank == 1) {
          res = `<span style='color:#FE5500'>${obj.saleFrom}</span>`;
        } else if (obj.rank == 2 || obj.rank == 3 || obj.rank == 4) {
          res = `<span style='color:#2EBA07'>${obj.saleFrom}</span>`;
        } else {
          res = `<span style='color:#108EE9'>${obj.saleFrom}</span>`;
        }
        return res;
      };
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.renderSaleCountChart1();
    // });
  },
  methods: {
    search(data) {
      console.log(data);
    },
  },
};
</script>

<style lang="scss" scope>
.sale_online_detail {
  width: 1200px;
  .top_data {
    height: 240px;
    width: 100%;
    margin-top: 20px;
    justify-content: space-around;
    .chart {
      width: 188px;
      height: 153px;
    }
  }
  .bottom_table {
    width: 100%;
  }
}
</style>